<script setup lang="ts">
import { ref, computed, watch, reactive } from 'vue'

const firstName = ref(100)
const lastName = ref('蔡徐坤')

const obj = reactive({
  name:'蔡徐坤',
  age:18,
  hobby:{
    name:'唱',
    name2:'跳',
    name3:'rap',
    other:{
      name:'打',
      name2:'篮球'
    }
  }
})

const obj2 = reactive({
  name:'王俊凯',
  age:18
})

watch([firstName,lastName],(n,o) => {
  console.log(o,n);
})

watch([() => obj.age,() => obj2.name], (newValue, oldValue) => {
  console.log(newValue, oldValue);
})

watch(() => obj.hobby.other.name2, (newValue, oldValue) => {
  console.log(newValue, oldValue);
},{deep:false,immediate:true})

</script>


<template>
  <div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <button @click="obj.age++">蔡徐坤年龄加一</button>
    <button @click="obj.hobby.other.name2 = '蛋'">蔡徐坤不喜欢打球</button>
  </div>
</template>

<style>
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}

th,
td {
  border: 1px solid #000;
}

h3 {
  position: relative;
}
</style>
